import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

export function useGraphMixin() {
  const graphChart = ref(null);
  const graphData = ref({ nodes: [], relationships: [] });
  const graphContainer = ref(null);
  const isFullscreen = ref(false);
  const loading = ref(false);
  const showGraph = ref(false);

  onMounted(() => {
    console.log('[GraphMixin] 组件已挂载');
    
    // 添加全屏变化事件监听
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
  });
  
  onUnmounted(() => {
    // 移除全屏变化事件监听
    document.removeEventListener('fullscreenchange', handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
    document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
  });
  
  // 全屏变化事件处理函数
  const handleFullscreenChange = () => {
    // 检查当前是否有元素处于全屏状态
    const isCurrentlyFullscreen = !!document.fullscreenElement || 
                                 !!document.webkitFullscreenElement || 
                                 !!document.mozFullScreenElement || 
                                 !!document.msFullscreenElement;
    
    // 更新状态
    if (isFullscreen.value !== isCurrentlyFullscreen) {
      console.log('[GraphMixin] 全屏状态变化:', isCurrentlyFullscreen);
      isFullscreen.value = isCurrentlyFullscreen;
      
      // 调整图表大小
      setTimeout(() => {
        if (graphChart.value) {
          graphChart.value.resize();
        }
      }, 300);
    }
  };

  const toggleFullscreen = () => {
    const graphCard = document.querySelector('.graph-card');
    if (!graphCard) {
      console.error('未找到图表容器元素');
      return;
    }
    
    if (!isFullscreen.value) {
      try {
        if (graphCard.requestFullscreen) {
          graphCard.requestFullscreen();
        } else if (graphCard.mozRequestFullScreen) {
          graphCard.mozRequestFullScreen();
        } else if (graphCard.webkitRequestFullscreen) {
          graphCard.webkitRequestFullscreen();
        } else if (graphCard.msRequestFullscreen) {
          graphCard.msRequestFullscreen();
        }
        isFullscreen.value = true;
      } catch (error) {
        console.error('进入全屏模式失败:', error);
      }
    } else {
      try {
        // 添加安全检查 - 确保document仍然处于活动状态且有fullscreenElement
        if (!document.fullscreenElement && 
            !document.webkitFullscreenElement && 
            !document.mozFullScreenElement && 
            !document.msFullscreenElement) {
          console.log('当前没有元素处于全屏状态，直接更新状态');
          isFullscreen.value = false;
          return;
        }
        
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        isFullscreen.value = false;
      } catch (error) {
        console.error('退出全屏模式失败:', error);
        // 如果退出全屏失败，强制更新状态
        isFullscreen.value = false;
      }
    }

    setTimeout(() => {
      if (graphChart.value) {
        graphChart.value.resize();
      }
    }, 300);
  };

  const handleGraphExport = (data) => {
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = '图谱数据.json';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  };

  return {
    graphChart,
    graphData,
    graphContainer,
    isFullscreen,
    loading,
    showGraph,
    toggleFullscreen,
    handleGraphExport
  };
}

export function useStatsMixin() {
  const statsData = ref(null);
  const loading = ref(false);

  const handleStatsExport = (data) => {
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = '统计数据.json';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  };

  return {
    statsData,
    loading,
    handleStatsExport
  };
}

export function useKeyMaterialsMixin() {
  const keyMaterialsData = ref(null);
  const loading = ref(false);

  const handleKeyMaterialsExport = (data) => {
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = '关键材料分析.json';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  };

  return {
    keyMaterialsData,
    loading,
    handleKeyMaterialsExport
  };
} 